<template>
  <div class="recovery-btn">
    <Header>修改密码</Header>
    <section>
        <div class="recovery-pwd">
          <input type="password" placeholder="请输入密码" v-model="userPwd" @blur="pwdRules" >
          <input type="password" placeholder="请再次输入密码" v-model="userPwd_again"  @blur="pwdRules">
          <h5>{{errMsg}}</h5>
        </div>
        <div class="recovery-btn" @click="submitBtn">确 定</div>
        
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from '@/components/login/Header.vue'
//引入弹窗组件
import { Toast } from 'mint-ui';
//引入axios的二次封装
import http from '@/common/api/request.js'


export default {
    name:'RecoveryBtn',
    components:{
        Tabbar,
        Header
    },
    data(){
      return{
            userTel:'',//用户输入手机号
            //验证规则
            rules:{
              //密码验证 不能为空且6-12位
              userPwd:{
                rule:/^[\w]{6,12}$/,
                msg:'密码不能为空，应为6-12位,不能含有除下划线以外字符'
              },
              userPwd_again:{
                rule:/^[\w]{6,12}$/,
                msg:'密码不能为空，应为6-12位,不能含有除下划线以外字符'
              }
               
            },
            disabled:false,
            //点击获取验证码后的倒计时
            codeNum:6,
            //点击短信验证码后的按钮内容
            codeMsg:'获取短信验证码',
            //存储短信验证码
            code:'',
            //用户输出的短信验证码
            userCode:'',
            //用户首次输入的密码
            userPwd:'',
            //用户第二次输入的密码
            userPwd_again:'',
            //错误显示的信息
            errMsg:'',
            //一切操作无误 成功
            success:false,
            //
           
            
            
      }
    },
    //存储上一个界面传递的userTel
    created(){
      //判断本地存储是否为空
      if(sessionStorage.getItem('userTel')){
        //如果不为空 则直接获取本地存储
        this.userTel=sessionStorage.getItem('userTel')
      }else{
        //如果为空 存储从忘记密码界面传递的 userTel 
        this.userTel = this.$route.params.userTel
        sessionStorage.setItem('userTel',this.userTel)
      }
      // console.log(this.userTel)
    },
    //离开界面的时候销毁（一定要销毁不然每次跳转到界面会是之前的本地存储导致判断不为空 也获取不到）
    beforeDestroy() {
        sessionStorage.removeItem('userTel')
   	},
    methods:{      
      //输入框失去焦点判断密码是否符合规则
      pwdRules(){
        //输入的密码符合格式
        if(!this.validatePwd('userPwd')) return 
        if(!this.validatePwd('userPwd_again')) return 
      },
      //前端判断密码格式
      validatePwd(key){
        let bool = true
        //如果验证密码为错误格式
        if(this.userPwd!=='' &&this.userPwd_again!==''){
          if(!this.rules[key].rule.test(this[key])){
            //提示信息
            this.errMsg = this.rules[key].msg
            bool =false
            return false
          }else{
            this.errMsg = ''
          }
          return bool
        }
       
      },
      submitBtn(){
        //判断用户密码是否一致
        if(this.userPwd == this.userPwd_again &&this.userPwd !==''){
            http.$axios({
              url:'/api/recovery',
              method:'POST',
              data:{
                phone:this.userTel,
                userPwd:this.userPwd
              }
            }).then(res=>{
              Toast(res.msg)
              this.$router.push('/my')
            })
        }else{
          Toast('两次输入的密码不一致')
        }
      }
      
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: (20 / @rootsize) 0;
  font-size: (14 / @rootsize);
  input{
    line-height: (44 / @rootsize);
    height: ( 44 / @rootsize);
    background-color: #fff;
    padding: 0 (20 / @rootsize);
  }
  .recovery-pwd{
    padding: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    input{
      width: 100%;
      border: 1px solid #ccc;
    }
    input:nth-child(2){
      margin-top:(30 / @rootsize) ;
    }
    h5{
      display: inline-block;
      height: (12 / @rootsize);
      padding: 0  (5 / @rootsize) ;
      color: #b0352f;
      font-size: (12 / @rootsize);
      font-weight: 400;
    }
  }
  .recovery-btn{
    width: (335 / @rootsize);
    line-height: (44 / @rootsize);
    color: #fff;
    background-color: #b0352f;
    border-radius: 5px;
    text-align: center;
    font-size: (18 / @rootsize);
  }
  
}
//背景颜色
section::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: -1;
}
</style>